<template>
  <div>
    <el-dialog
      width="800px"
      :title="$t('剩余库位数量')"
      destroy-on-close
      custom-class="batchDispatchPrint-dialog"
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <div id="batchDispatchPrint">
        <div data-th-each="package,stat:${batchPackage}" v-for="(item, index) in tableData" :key="index">
          <div class="content">
            <!-- top -->
            <div class="content-top">
              <div class="content-top_left">
                <div class="content-top_left_top">
                  <div class="content-top_left_top_box">
                    <div style="height: 10px"></div>
                    <div class="address-info">
                      <div class="address-info-address">
                        <div>お届け先</div>
                        <div>
                          〒<span data-th-text="${package.consigneePostCode}">{{ item.consigneePostCode }}</span>
                        </div>
                        <div data-th-text="${package.shippingAddress1}">{{ item.shippingAddress1 }}</div>
                        <div data-th-text="${package.shippingAddress2}">{{ item.shippingAddress2 }}</div>
                        <div data-th-text="${package.shippingAddress3}">{{ item.shippingAddress3 }}</div>
                        <div data-th-text="${package.consignee}" style="margin-top: 20px">{{ item.consignee }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-top_left_bot">
                  <div class="content-top_left_bot_left">
                    <div class="content-top_left_bot_left_box">
                      <!-- top -->
                      <div class="content-top_left_bot_left_box_top">
                        <div style="height: 10px"></div>
                        <div>発送元:</div>
                        <div>
                          <span data-th-text="${package.deliveryPostCode}">{{ item.deliveryPostCode }}</span>
                        </div>
                        <div>
                          <span data-th-text="${package.deliveryAddress}">{{ item.deliveryAddress }}</span>
                        </div>
                      </div>
                      <!-- bot -->
                      <div class="content-top_left_bot_left_box_bot">
                        <div>
                          <span data-th-text="${package.transport}" style="color: red; font-size: 15px">自派送</span>
                        </div>
                        <!-- <div>
                          <span data-th-text="${package.transport}">{{ item.transport }}</span>
                        </div>
                        <div>
                          <span data-th-text="${package.transportType}">{{ item.transportType }}</span>
                        </div> -->
                      </div>
                    </div>
                  </div>
                  <div class="content-top_left_bot_right">
                    <div class="content-top_left_bot_right_box">
                      <div style="position: relative">
                        <span
                          style="position: absolute; top: 0; font-size: 13px"
                          data-th-text="${package.packageNum}"
                          >{{ item.packageNum }}</span
                        >
                        <span
                          style="position: absolute; bottom: -15px; font-size: 11px; text-align: center; width: 100%"
                          >管理番号:<span data-th-text="${package.packageNo}">{{ item.packageNo }}</span>
                        </span>
                        <img style="width: 100px; height: 100px; margin-left: 25%" :src="item.packageNoSrc" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-top_right">
                <div class="content-top_right_box">
                  <table align="center" width="100%" cellspacing="0px" border="1">
                    <tr
                      data-th-each="stockPosition:${package.stockPositionList}"
                      v-for="(stock, sIndex) in item.stockPositionList"
                      :key="sIndex"
                    >
                      <td data-th-text="${stockPosition.stockPositionNo1}">{{ stock.stockPositionNo1 }}</td>
                      <td>
                        個数:<span data-th-text="${stockPosition.stockPositionNum1}">{{
                          stock.stockPositionNum1
                        }}</span>
                      </td>
                      <td data-th-text="${stockPosition.stockPositionNo2}">{{ stock.stockPositionNo2 }}</td>
                      <td>
                        個数:<span data-th-text="${stockPosition.stockPositionNum2}"></span
                        >{{ stock.stockPositionNum2 }}
                      </td>
                    </tr>
                  </table>
                  <!-- bot -->
                  <div class="content-top_right_box_bot">
                    <div class="content-top_right_box_bot_img">
                      <div style="height: 10px"></div>
                      <img
                        :src="item.logo"
                        style="max-width: 100%; height: 50px; object-fit: cover; margin-left: 2px"
                      />
                    </div>
                    <div class="content-top_right_box_bot_text">
                      <div>領収書在中</div>
                      <div style="color: red" data-th-text="${package.totalAllocation}">{{ item.totalAllocation }}</div>
                    </div>
                    <div class="content-top_right_box_bot_qr">
                      <img
                        type="image/barcode"
                        style="width: 83px; height: 83px; padding: 0"
                        data-th-value="${package.packageNo}"
                        :src="item.packageNoSrc2"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- center -->
            <div class="content-center">
              <div class="content-center-title">
                <div class="content-center-title-item">お買い上げ明細書</div>
                <div class="content-center-title-item info">
                  <div>
                    管理番号:
                    <span style="margin-right: 15px" data-th-text="${package.packageNo}">{{ item.packageNo }}</span>
                    <span data-th-text="${package.packageNum}">{{ item.packageNum }}</span>
                  </div>
                </div>
              </div>
              <div class="content-center-detail">
                <div class="content-center-detail_item">
                  <div class="content-center-detail_item_left">商品名/项目 選択肢</div>
                  <div class="content-center-detail_item_right">
                    <div class="num">個数</div>
                    <div class="unitPrice">単価</div>
                  </div>
                </div>
                <!-- 循环数据 -->
                <div
                  class="content-center-detail_item"
                  data-th-each="goods:${package.goodsList}"
                  v-for="(goods, goodsIndex) in item.goodsList"
                  :key="goodsIndex"
                >
                  <div class="content-center-detail_item_left" data-th-text="${goods.goodsName}">
                    {{ goods.goodsName }}
                  </div>
                  <div class="content-center-detail_item_right">
                    <div class="num" data-th-text="${goods.orderNum}">{{ goods.orderNum }}</div>
                    <div class="unitPrice" data-th-text="${goods.orderUnitPrice}">{{ goods.orderUnitPrice }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 费用相关 -->
            <div class="content-fee">
              <div class="content-fee-item">
                <div>消費税</div>
                <div data-th-text="${package.saleTax}">{{ item.saleTax }}</div>
              </div>
              <div class="content-fee-item">
                <div>送料</div>
                <div data-th-text="${package.freight}">{{ item.freight }}</div>
              </div>
              <div class="content-fee-item">
                <div>代引き手数料</div>
                <!--<div>0</div>-->
              </div>
              <div class="content-fee-item">
                <div>ポイント利用額</div>
                <div data-th-text="${package.usePoints}">{{ item.usePoints }}</div>
              </div>
              <div class="content-fee-item">
                <div>クーポン利用額</div>
                <div data-th-text="${package.useCoupon}">{{ item.useCoupon }}</div>
              </div>
              <div class="content-fee-item">
                <div>請求金額</div>
                <div data-th-text="${package.payAmount}">{{ item.payAmount }}</div>
              </div>
              <div class="content-fee-item">
                <div>订购日期</div>
                <div data-th-text="${package.orderDate}">{{ item.orderDate }}</div>
              </div>
              <div class="content-fee-item_list" style="width: 300px">
                <div style="margin-top: 5px">注文番号</div>
                <div>
                  <div
                    data-th-each="baseOrder:${package.baseOrderList}"
                    v-for="(baseOrder, baseOrderIndex) in item.baseOrderList"
                    :key="baseOrderIndex"
                  >
                    <span data-th-text="${baseOrder.baseOrder}" style="width: 300px">{{ baseOrder.baseOrder }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 領収書 -->
            <div class="content-receive">
              <div
                class="content-receive-no"
                data-th-if="${package.corporationTaxTemp} == true"
                v-if="item.corporationTaxTemp"
              >
                インボイスの登録番号: <span data-th-text="${package.corporationTax}">{{ item.corporationTax }}</span>
              </div>
              <div class="content-receive-title">領収書</div>
              <div class="content-receive-content">
                <div class="content-receive-content_left">
                  <!-- 御中 -->
                  <div class="content-receive-content_left_row1">
                    <div>
                      <span style="border-bottom: 1px solid">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      </span>
                      御中
                    </div>
                  </div>
                  <!-- 金额 -->
                  <div class="content-receive-content_left_row2">
                    <div>
                      金额
                      <span data-th-text="${package.turnover}"> {{ item.turnover }} </span>
                      円（税込）
                    </div>
                  </div>
                  <div class="content-receive-content_left_row3">
                    <div>但 品代として</div>
                    <div>上記正に領収いたしました。</div>
                  </div>
                </div>
                <div class="content-receive-content_right">
                  <div class="content-receive-content_right_row1">
                    注文日：<span data-th-text="${package.orderDate}">{{ item.orderDate }}</span>
                  </div>
                  <div class="content-receive-content_right_row2">
                    <div>
                      <span data-th-text="${package.corporationName}">{{ item.corporationName }}</span>
                    </div>
                    <div>
                      <span data-th-text="${package.deliveryPostCode}">{{ item.deliveryPostCode }}</span>
                    </div>
                    <div>
                      <span data-th-text="${package.deliveryAddress}">{{ item.deliveryAddress }}</span>
                    </div>
                    <!-- 印章 -->
                    <div class="stamp">
                      <img style="max-width: 110px; margin-left: 25%" :src="item.corporationSignet" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- bottom -->
            <div class="content-bottom">
              <div style="height: 10px"></div>

              <div class="content-bottom-left">
                <div class="content-bottom-left_left" style="position: relative">
                  <img
                    v-if="item.linkSrc"
                    type="image/barcode"
                    style="width: 100px; height: 100px; position: relative; top: 0"
                    :src="item.linkSrc"
                  />
                  <img
                    style="max-width: 100px; height: 40px; position: relative; object-fit: contain"
                    type="image/barcode"
                    :src="item.logo"
                  />
                </div>
                <div class="content-bottom-left_right">
                  <div class="content-bottom-left_right_text">
                    <br />
                    <span data-th-text="${package.print1}">{{ item.print1 }}</span
                    ><br />
                    <span data-th-text="${package.print2}">{{ item.print2 }}</span
                    ><br />
                    <span data-th-text="${package.deliveryPostCode}">{{ item.deliveryPostCode }}</span>
                    <span data-th-text="${package.deliveryAddress}">{{ item.deliveryAddress }}</span
                    ><br />
                    <span data-th-text="${package.tel}">{{ item.tel }}</span>
                  </div>
                </div>
              </div>
              <div class="content-bottom-right">
                <div>
                  <span data-th-text="${package.print3}">{{ item.print3 }}</span
                  ><br />
                  <span data-th-text="${package.print4}">{{ item.print4 }}</span>
                </div>
                <div style="margin-top: 10px">
                  <span data-th-text="${package.print5}">{{ item.print5 }}</span
                  ><br />
                  <span data-th-text="${package.print6}">{{ item.print6 }}</span>
                </div>
              </div>
            </div>
            <!-- 下一页 -->
            <div data-th-if="${stat.last} != true" v-if="!item.isLast">
              <div style="page-break-after: always"></div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer">
        <el-button type="primary" v-print="'#batchDispatchPrint'" ref="printRef">{{ $t('打印') }}</el-button>
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Print from 'vue-print-nb'

export default {
  name: 'PrintSpNoLeftNumber',
  directives: {
    Print,
  },
  props: {
    /**
     * @type {import('vue').PropOptions<{batchPackage:Array<any>}>}
     * @return
     */
    formData: {
      type: [Object, Array],
      default: () => [],
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },

  methods: {
    getList() {
      this.tableData = this.formData
      this.$nextTick(() => {
        this.$refs['printRef'].$el.click()
        this.cancel()
      })
    },

    handleSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped>
@page {
  size: A4;
  margin: 0.5cm;

  @top-left {
    content: element(top-left);
  }
}

@media print {
  /* 在指定元素之前插入分页 */
  .page-break-before {
    page-break-before: always;
  }

  /* 在指定元素之后插入分页 */
  .page-break-after {
    page-break-after: always;
  }

  /* 避免在元素内部分页 */
  .no-page-break-inside {
    page-break-inside: avoid;
  }

  body {
    margin: 2px;
    /* 设置打印边距为20px */
    padding: 0;
  }
}

body {
  font-family: AlibabaPuHuiTi-Light, AlibabaPuHuiTi_2_45_Light, NotoEmoji-Regular, NotoSansCJKsc-VF,
    SourceHanSerifSC-Regular, HanaMinA, HanaMinB;
  line-height: 1.2;
  font-size: 8px;
  /*设置背景色*/
  /*background: #00FF00 ;*/
  /*设置背景图片*/
  /*background-image:url() no-repeat fixed top;*/
}

object {
  object-fit: cover;
}

img {
  object-fit: cover;
}

.content {
  width: 100%;
}

.content-top {
  width: 100%;
  height: 350px;
  border: 1px solid #000;
  border-right: none;
  overflow: hidden;
}

.content-top_left {
  width: 50%;
  height: 100%;
  float: left;
  border-right: 1px solid #000;
}

.content-top_left_top {
  height: 65%;
  border-bottom: 1px solid #000;
}

.content-top_left_top_box {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
}

.content-top_left_top_box .address-info-title {
  text-indent: 10px;
}

.content-top_left_top_box .address-info-address {
  text-indent: 25px;
}

.content-top_left_top_box .address-info-address div {
  margin-top: 10px;
}

/*.content-top_left_top_box .address-info-address p {
            margin-block-start: 0;
            margin-block-end: 0;
            line-height: 14px;
            margin-top: 5px;
        }*/

/*.content-top_left_top_box .address-info-address p:nth-child(1) {
            margin-top: 0px;
            text-indent: 10px;
        }

        .content-top_left_top_box .address-info-address p:nth-child(2) {
            margin-top: 0px;
            text-indent: 10px;
        }*/

.content-top_left_bot {
  height: 35%;
  width: 100%;
  font-size: 9px;
}

.content-top_left_bot_left {
  float: left;
  width: 49%;
  height: 100%;
  border-right: 1px solid #000;
}

.content-top_left_bot_left_box {
  width: 100%;
  height: 100%;
  text-indent: 10px;
  overflow: hidden;
}

.content-top_left_bot_left_box_top {
  height: 50%;
  border-bottom: 1px solid #000;
  overflow: hidden;
}

.content-top_left_bot_left_box_bot {
  height: 49%;
  overflow: hidden;
}

.content-top_left_bot_left_box_bot div {
  float: left;
  height: 100%;
  line-height: 60px;
}

.content-top_left_bot_right {
  float: right;
  width: 50%;
  height: 100%;
}

.content-top_left_bot_right_box {
  width: 100%;
  height: 100%;
}

.content-top_right {
  width: 49.8%;
  height: 100%;
  float: left;
}

.content-top_right_box {
  width: 100%;
  height: 100%;
  font-size: 10px;
}

.content-top_right_box table {
  height: 262.5px;
  border: none;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: left;
}

.content-top_right_box table tr {
  height: 18.75px;
}

.content-top_right_box table tr td:nth-child(1) {
  width: 30%;
  font-weight: bold;
}

.content-top_right_box table tr td:nth-child(2) {
  text-align: left;
  width: 20%;
}

.content-top_right_box table tr td:nth-child(3) {
  width: 30%;
  font-weight: bold;
}

.content-top_right_box table tr td:nth-child(4) {
  text-align: left;
  width: 20%;
}

.content-top_right_box_bot {
  height: 87.5px;
  /* line-height: 87.5px; */
  border-right: 1px solid #000;
  overflow: hidden;
}

.content-top_right_box_bot_img {
  width: 40%;
  float: left;
  height: 100%;
  position: relative;
}

.content-top_right_box_bot_img img {
  position: absolute;
  top: 10px;
  left: 0;
}

.content-top_right_box_bot_text {
  width: 30%;
  float: left;
  font-size: 14px;
  text-align: center;
  margin-top: 25px;
}

.content-top_right_box_bot_qr {
  width: 25%;
  height: 100%;
  float: left;
  font-size: 14px;
  margin-top: 1px;
}

.content-center {
  width: 100%;
  height: 350px;
}

.content-center-title {
  border-bottom: 1px solid #000;
  height: 35px;
  line-height: 35px;
}

.content-center-title-item {
  float: left;
  font-size: 13px;
  font-weight: bold;
}

.content-center-title .info {
  float: right;
  font-weight: normal;
  font-size: 10px;
}
.content-center-detail_item {
  font-size: 11px;
}

.content-center-detail_item_left {
  width: 82%;
  float: left;
}

.content-center-detail_item_right {
  width: 8%;
  float: right;
}

.content-center-detail_item_right .num {
  float: left;
}

.content-center-detail_item_right .unitPrice {
  float: right;
}

.content-fee {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  height: 50px;
  font-size: 10px;
}

.content-fee-item {
  float: left;
  margin: 5px 10px 0 0;
}

.content-fee-item_list {
  font-size: 6px;
  float: left;
  height: 100%;
}

.content-fee-item_list table {
  height: 100%;
}

.content-fee-item_list table tr {
  line-height: 3px;
}

.content-fee-item_list table tr th {
  font-weight: normal;
}

.content-receive {
  height: 125px;
  padding: 25px;
  padding-top: 15px;
  border-top: 1px solid #000;
}

.content-receive-no {
  text-align: right;
  font-size: 13px;
}

.content-receive-title {
  text-align: center;
  letter-spacing: 5px;
  font-size: 20px;
}

.content-receive-content {
  width: 100%;
  margin-top: 15px;
  font-size: 13px;
}

.content-receive-content_left {
  float: left;
  width: 50%;
  text-align: right;
}

.content-receive-content_left_row1 {
  margin-bottom: 15px;
  margin-right: 10px;
}

.content-receive-content_left_row2 {
  margin: 5px 0;
  margin-right: 10px;
}

.content-receive-content_left_row3 {
  margin: 5px 0;
  margin-right: 15px;
  font-size: 10px;
}

.content-receive-content_right {
  float: left;
  width: 50%;
  text-align: left;
}

.content-receive-content_right_row1 {
  margin-bottom: 15px;
  margin-left: 10px;
}

.content-receive-content_right_row2 {
  margin: 5px 0;
  margin-left: 10px;
  position: relative;
}

.content-receive-content_right_row2 .stamp {
  position: absolute;
  top: -50px;
  left: 0px;
}

.content-bottom {
  font-size: 10px;
  width: 100%;
  border-top: 1px solid #000;
  height: 160px;
  overflow: hidden;
}

.content-bottom-left {
  float: left;
  width: 49%;
  height: 100px;
  position: relative;
}

.content-bottom-left_left {
  width: 28%;
  height: 100%;
  float: left;
}

.content-bottom-left_left img {
  position: absolute;
  left: 0;
  top: 0;
}

.content-bottom-left_right {
  width: 70%;
  height: 100%;
  float: right;
}

.content-bottom-left_right_img {
  height: 40%;
}

.content-bottom-left_right_text {
  height: 60%;
}

.content-bottom-right {
  height: 100px;
  float: right;
  width: 50%;
  margin-top: 15px;
}
</style>
